<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.jifen{
		width: 100%;
		background-color: $bgw;
		min-height: 100%;
		font-size: 1.2rem;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		bottom: 0;
		background-color: $main-bgc-gray;
		.wp{
			height: 100%;
			background-color: white;
			display: flex;
			flex-direction: column;
			.wpnoscrollbox{
				align-items: center;
				background-color: white;
				color: $color3;
				.line{
					width: 100%;
					height: 13rem;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					background-image: url(../../assets/img/top2.svg);
					background-repeat: no-repeat;
					background-size: cover;
					img{
						position: fixed;
						top: 0;
						left: 0;
						width: 100%;
						height: 13rem;
						object-fit: cover;
					}
					.box{
						color:white;
						z-index: 10;
						text-align: center;
						.number{
							font-size: 2rem;
							font-weight: bold;
						}
						.text{
							font-size: 1rem;
							margin-top: 1rem;
						}
					}
				}
				.timeBox{
					// display: flex;
					// flex-direction: column;
					align-items: center;
					justify-content: space-around;
					background-color: white;
					border-top: 1px solid #f0f0f0;
					border-bottom: 1px solid #f0f0f0;
					height: 4rem;
					.time{
						display: flex;
						// align-items: center;
						// justify-content: center;
						padding: 0rem 1.6rem;
						height: 4rem;
						line-height: 4rem;
						font-size: 1.4rem;
						color: $color2;
					}
				}
			}
			.no-data{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.list{
				flex: 1;
				background-color: $main-bgc-white;
				overflow-y: scroll;
				width: 100%;
				box-sizing: border-box;
				// border: 1px solid red;
				.item{
					padding: 1rem 1.2rem;
					display: flex;
					justify-content: space-between;
					.leftBox{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.text{
							font-size: 1.4rem;
						}
						.time{
							font-size: 1.2rem;
							color:$color3;
							margin-top: 0.8rem;
						}
					}
					.rightBox{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-around;
						font-size: 1.7rem;
					}
				}
			}
		}
	}
</style>
<template>
	<div class="jifen">
		<!-- <img src="../../assets/img/top2.svg" class="top_bg"> -->
		<!-- <van-image
			class="top_bg"
		  width="100%"
		  fit="contain"
		  src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5ec59f1e-d7e4-40a5-91d6-605747ef2fcc/7cdd450d-b89f-419d-b46f-bac7fbe56c83.svg"
		/> -->
		<div class="wp">
			<div class="wpnoscrollbox">
				<div class="line">
					<!-- <img src="../../assets/img/top2.svg" class="top_bg"> -->
					<div class="box">
						<div class="number">{{totalPoint||0}}</div>
						<div class="text">当前贡献值</div>
					</div>
				</div>
				<div class="timeBox" @click="showPop=!showPop">
					<div class="time">
						<span class="text">{{selectTime}}</span>
						<span class="margL-m"><van-icon name="arrow-down" /></span>
					</div>
				</div>
			</div>
			<div class="margT-l list" v-if="list&&list.length>0"  :style="{height:listHeight + 'px'}">
				<div class="item" v-for="(item, index) in list" :key="index">
					<div class="leftBox">
						<div class="text">{{item.name}}</div>
						<div class="time">{{item.createtime}}</div>
					</div>
					<div class="rightBox">
						+{{item.value}}
					</div>
				</div>
			</div>
			<div v-else class="no-data color-s list">已经到底了</div>
		</div>
		<van-popup v-model="showPop" position="bottom">
			<van-datetime-picker
			  v-model="currentDate"
			  type="year-month"
			  title="选择时间"
			  :min-date="minDate"
			  :max-date="maxDate"
			  :formatter="formatter"
			  @confirm="confirm"
			  @cancel="cancel"
			/>
		</van-popup>
	</div>
</template>

<script>
	// @ is an alias to /src
	// import ZixunList from '@/components/zixunList.vue'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "jifen",
		mixins: [myMixins],
		components: {
			
		},
		data() {
			return {
				minDate: new Date(2021, 4, 1),
				maxDate: new Date(2031, 5, 1),
				currentDate: new Date(),
				selectTime: '时间',
				showPop:false,
				loading: false,
				finished: false,
				pageNo: 1,
				pageSize: 50,
				list:[],
				totalPoint:'',
				listHeight:''
			}
		},
		created() {
			const _this = this;
			// this.getCode()
		},
		mounted() {
			// document.title = '活动管理'
			//屏幕高度
			const screenHeight = document.body.clientHeight
			console.log("screenHeight",screenHeight)
			//不可滚动框高度
			const wpnoscrollbox = this.$refs.wpnoscrollbox
			console.log("wpnoscrollboxHeight",wpnoscrollbox.clientHeight)
			const wpnoscrollboxHeight = wpnoscrollbox.clientHeight
			//list高度
			this.listHeight = screenHeight - wpnoscrollboxHeight
			this.GetByIdTotalPoints()
		},
		methods: {
			confirm(val) {
				console.log("val", this.$utils.formatDateYM(val))
				this.selectTime = this.$utils.formatDateYM(val)
				this.showPop = false
				this.list=[]
				this.loading = false
				this.finished = false
				this.GetByIdTotalPoints()
			},
			cancel() {
				this.showPop = false
			},
			formatter(type, val) {
			  if (type === 'year') {
				return `${val}年`;
			  } else if (type === 'month') {
				return `${val}月`;
			  }
			  return val;
			},
			GetByIdTotalPoints() {
				const _this = this;
				let params = {
					createtime: this.selectTime,
					campus_id: JSON.parse(localStorage.getItem('selectedCampus')).id,
					openid: this.$store.state.openid || localStorage.getItem('openid'),
					pageNo: _this.pageNo,
					pageSize: _this.pageSize
				}
				_this.loading = true
				_this.$request.ContributionPage(params).then(res => {
					let data = res.data.data
					_this.totalPoint = res.data.totalContribution
					_this.list.push(...data)
					console.log(_this.list.length)
					if (_this.pageNo >= (Math.ceil(res.data.totalCount / _this.pageSize))) {
						_this.finished = true;
					} else {
						_this.pageNo++
					}
					// this.$store.commit('setCaseList', this.caseList);
				}).finally(() => {
					console.log('finally')
					_this.loading = false
				})
			},
		}
	};
</script>
